import { forwardRef, useImperativeHandle, useRef } from "react"
import { Editor } from '@tinymce/tinymce-react';

type Props = {
    height?: number
    content: string;
    readonly: boolean
}
const EditorPad = (props: Props, ref) => {
    const { height = 590, content = '', readonly } = props
    // editor 实例
    const editorRef = useRef<any>(null);

    const getHtml = () => {
        return editorRef.current?.getContent() || ''
    };

    useImperativeHandle(ref, () => ({
        getHtml: getHtml
    }))

    return (
        <div >
            <Editor
                onInit={(_evt, editor) => editorRef.current = editor}
                tinymceScriptSrc='/tinymce/tinymce.min.js'
                apiKey='no-api-key'
                licenseKey="gpl"
                disabled={readonly}
                init={{
                    language: 'zh_CN',
                    height: height,
                    menubar: false,
                    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                }}
                initialValue={content}
            />
        </div>

    )
}

export default forwardRef(EditorPad)
